import React, {useEffect, useState} from "react";
import {Text} from "react-native-elements";
import {Dimensions, ScrollView, StyleSheet, TextInput, TouchableHighlight, View} from "react-native";
import {fontSize_15, fontSize_16} from "./theme";
import {addChain, chainBaseType, chainInfoType,ETH_more_Logo} from "./smartxL2Libs/L2_Data";
import SimpleToast from "react-native-simple-toast";
import {SvgXml} from "react-native-svg";
import {rightSvgXml} from "../libs/svgXml";
import {getChainID} from "./smartxL2Libs/smartxL2Web3";
import {getNumberFrom16Or10} from "./smartxL2Libs/L2_utils";

const {width,height,scale} = Dimensions.get("window");

const L2_AddCustomizeNet = ({navigation,route}:any) => {
    const [netInfo,setNetInfo] = useState([
        {
            title:"网络系列",
            placeHoldText:"以太系列",
            content:"以太系列",
            rightSvg:true,
            disable:true
        },
        {
            title:"网络名称",
            placeHoldText:"请自定义网络名称",
            content:""
        },
        {
            title:"节点链接 RPC",
            placeHoldText:"请输入节点",
            content:""
        },
        {
            title:"链ID",
            placeHoldText:"请输入链ID",
            content:""
        },
        {
            title:"默认代币符号(选填)",
            placeHoldText:"请输入默认代币符号(不填为ETH)",
            content:""
        },
        {
            title:"区块链浏览器(选填)",
            placeHoldText:"请输入区块链浏览器链接",
            content:""
        },
        {
            title:"区块链浏览器API(选填)",
            placeHoldText:"请输入区块链浏览器API链接",
            content:""
        },
        {
            title:"区块链浏览器APIKey(选填)",
            placeHoldText:"区块链浏览器APIKey",
            content:""
        },
    ])
    useEffect(()=>{
        navigation.setOptions({
            title:"自定义网络"
        })
    },[])
    return (
        <View style={styles.container}>
            <ScrollView style={{width:"100%"}} contentContainerStyle={{width:"100%"}} showsVerticalScrollIndicator={false}>
            {
                netInfo.length?
                    netInfo.map((item,index)=>(
                        <View style={styles.tokenInfoContainer} key={"tokenInfo_"+index}>
                            <Text style={styles.tokenInfoTitle}>{item.title}</Text>
                                <TextInput
                                    underlineColorAndroid={'transparent'}
                                    placeholder= {item.placeHoldText}
                                    value={item.content}
                                    // multiline={true}
                                    onChangeText={
                                        (value) => {
                                            let temp = item;
                                            temp.content = value;
                                            let listTemp = [...netInfo]
                                            listTemp[index] = temp;
                                            setNetInfo(listTemp)
                                        }
                                    }
                                    style={{
                                        minHeight:40,
                                        padding:0,
                                        paddingLeft:0,
                                        paddingRight:20,
                                        fontSize:fontSize_15,
                                        lineHeight:20,
                                        borderBottomWidth:2/scale,
                                        borderBottomColor:"#e5e5e5",
                                        color:"black",
                                        // backgroundColor:"pink",
                                    }}
                                    editable={!item.disable}
                                />

                            {
                                item.rightSvg?
                                    <SvgXml xml={rightSvgXml("black")} width={22} height={22} style={{position:"absolute",right:10,bottom:10}}/>
                                    :null
                            }

                        </View>
                    )):null
            }
            </ScrollView>
            <View style={{flex:1}}/>
            <View style={styles.transferContainer}>
                <TouchableHighlight underlayColor={"#f5f6f8"} onPress={()=>{
                    navigation.goBack();
                }}
                                    style={[styles.transferBTN,styles.backgroundFrom,styles.marginRight10]}>
                    <Text style={[styles.transferTitle,{color:"#98999b"}]}>取消</Text>
                </TouchableHighlight>
                <TouchableHighlight underlayColor={"#96c4ff"} onPress={async () => {
                    let coinName = netInfo[4].content;
                    let chainIDTemp = getNumberFrom16Or10(netInfo[3].content);
                    if(netInfo[1].content==="" )
                    {
                        SimpleToast.show("请输入网络名称")
                        return ;
                    }
                    if(netInfo[2].content==="" )
                    {
                        SimpleToast.show("请输入节点链接RPC")
                        return ;
                    }
                    if(netInfo[3].content==="" )
                    {
                        SimpleToast.show("请输入链ID")
                        return ;
                    }
                    if(netInfo[4].content==="" )
                    {
                        coinName = "ETH";
                    }
                    let chainID = await getChainID(netInfo[2].content);
                    if(chainIDTemp !== chainID)
                    {
                        SimpleToast.show("请输入正确的链ID")
                        return ;
                    }
                    console.log(chainID,chainIDTemp,chainIDTemp !== chainID)
                    let chainBaseTemp:chainBaseType = {
                        name:netInfo[1].content,
                        chainID:chainIDTemp.toString(),
                        coinName,
                        blockNet:netInfo[5].content,
                        blockNetApi:netInfo[6].content,
                        blockNetKey:netInfo[7].content,
                        img:ETH_more_Logo,
                        tipText:"",
                    }
                    let chainInfoTemp:chainInfoType = {
                        chainID:chainIDTemp.toString(),
                        walletList:[],
                        providerUrlList:[netInfo[2].content],
                        selectedProviderUrl:netInfo[2].content,
                        userProviderUrlList:[]
                    }
                    let res = await addChain(chainBaseTemp,chainInfoTemp)
                    if(!res.success)
                    {
                        SimpleToast.show(res.falseReason);
                        return ;
                    }
                    navigation.goBack();
                    SimpleToast.show("添加成功")
                }}
                                    style={[styles.transferBTN,netInfo[3].content?styles.backgroundToLight:styles.backgroundTo]}>
                    <Text style={styles.transferTitle}>确认</Text>
                </TouchableHighlight>

            </View>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 10,
        // paddingRight: 10,
        backgroundColor: "white",
    },
    tokenInfoContainer:{
        width:"100%",
        paddingTop:20
    },
    tokenInfoTitle:{
        fontSize:fontSize_16,
        lineHeight:25
    },
    transferContainer:{
        height:65,
        width:width,
        padding:10,
        marginLeft:10,
        paddingRight:20,
        flexDirection:"row",
        alignItems:"center",
        justifyContent:"space-between",
    },
    transferBTN:{
        flex:1,
        height:"100%",
        alignItems:"center",
        justifyContent:"center",
        borderRadius:10,
    },
    transferTitle:{
        fontSize:fontSize_15,
        color:"white"
    },
    backgroundFrom:{
        backgroundColor:"#f5f6f8"
    },
    backgroundTo:{
        backgroundColor:"#96c4ff",
    },
    backgroundToLight:{
        backgroundColor:"#1d82fe",
    },
    marginRight10:{
        marginRight:10
    }
})
export default L2_AddCustomizeNet;


